<template>
  <el-card>
    <div class="stat-card">
      <div class="card-header">
        <span class="title-line" />
        <span class="title">数据对比</span>
      </div>
      <div v-loading="loading" :element-loading-text="loadingText" :element-loading-spinner="loadingSpinner" class="card-body">
        <el-table :data="tableData" tooltip-effect="dark" style="width: 100% !important" header-cell-class-name="yk-list-table-header-cell">
          <el-table-column prop="issue_no" label="活动券期号" show-overflow-tooltip />
          <el-table-column label="卡券类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <coupon-type :row="scope.row"></coupon-type>
            </template>
          </el-table-column>
          <el-table-column label="优惠信息" show-overflow-tooltip>
            <template slot-scope="scope">
              <coupon-info :row="scope.row"></coupon-info>
            </template>
          </el-table-column>
          <el-table-column prop="receive_count" label="领取次数" show-overflow-tooltip />
          <el-table-column prop="used_count" label="使用次数" show-overflow-tooltip />
          <el-table-column prop="expire_count" label="过期数量" show-overflow-tooltip />
        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script>
import CouponType from '@/pages/market/ticket/manage/components/couponType';
import CouponInfo from '@/pages/market/ticket/manage/components/couponInfo';

export default {
  name: 'Index',
  components: {
    CouponType,
    CouponInfo
  },
  props: {
    ticketId: {
      type: [String, Number],
      require: true,
      default: 0
    },
    couponIds: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      loading: true,
      loadingText: '',
      loadingSpinner: '-',
      tableData: []
    };
  },
  watch: {
    couponIds: {
      handler() {
        this.loadTableData();
      },
      deep: true
    }
  },
  created() {
    this.loadTableData();
  },
  methods: {
    loadTableData() {
      this.loading = true;
      if (this.couponIds.length === 0) {
        this.loadingText = '选择活动券后查看';
        return;
      }

      this.loadingSpinner = 'el-icon-loading';
      this.loadingText = '数据加载中';

      this.$http.get(
        '/admin/data/ticket/contrast/table/data',
        {
          date_type: this.dataType,
          ticket_id: this.ticketId,
          coupon_ids: this.couponIds,
          daterange: this.daterange
        },
        ({ data }) => {
          this.tableData = data;
          this.loading = false;
        },
        ({ msg }) => {
          this.loadingText = msg;
        },
        false
      );

      // getContrastTotal({
      //   code_ids: this.codeIds
      // }).then(({ data }) => {
      //   this.tableData = data;
      //   this.loading = false
      // })
    }
  }
};
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.stat-card {
  @include card-header;

  .card-body {
    margin-top: 26px;
  }
}
</style>
